<!--
 * @Author: Wangtao
 * @Date: 2022-08-31 13:43:16
 * @LastEditors: Wangtao
 * @LastEditTime: 2022-09-07 18:12:32
-->
<template>
  <div class="card-tabs-box">
    <tabs :tabs="tabs" @tabChange = 'tabChange' :activeName='currentTabComponent'></tabs>
    <div class="component">
      <!-- <el-scrollbar wrap-class="scrollbar-wrapper"> -->
        <keep-alive>
          <component :callRcordInfo='callRcordInfo' :cardInfo='cardInfo' :customerList='customerList' :scene='scene' v-bind:is="currentTabComponent"></component>
        </keep-alive>
      <!-- </el-scrollbar> -->
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs, defineAsyncComponent } from 'vue'
import tabs from '@app/call-center/views/recent-calls/component/mc-tabs.vue'
export default defineComponent({
  name: 'cardTabs',
  components: {
    tabs,
    callDynamicBi: defineAsyncComponent(
      {
        loader: () => import('@app/call-center/views/recent-calls/component/tab-component/callDynamicBi/index.vue')
      }
    ),
    customDetail: defineAsyncComponent({
      loader: () => import('@app/call-center/views/recent-calls/component/tab-component/customDetail/index.vue'),
      delay: 0
    }),
    callDetail: defineAsyncComponent({
      loader: () => import('@app/call-center/views/recent-calls/component/tab-component/callDetail/index.vue'),
      delay: 0
    })
  },
  props: {
    tabs: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 场景值 callcard 通话卡片 callrecord 通话记录详情
    scene: {
      type: String,
      default: 'callcard'
    },
    // 匹配客户列表
    customerList: {
      type: Array,
      default: () => {
        return []
      }
    },
    // 卡片信息-通话卡片
    cardInfo: {
      type: Object,
      default: () => {
        return {}
      }
    },
    // 通话详情信息
    callRcordInfo: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  // ----------------生命周期-----------------------
  setup(props: any, { emit }) {
    // ----------------传入属性-----------------------
    // ----------------内部属性-----------------------
    const state = reactive({
      currentTabComponent: ''
    })
    const  methods = reactive({
      tabChange (name: string) {
        console.log('lllllllllllllllllll')
        state.currentTabComponent = name
        emit('tabChange', name)
      }
    })

    
    // ----------------计算属性-----------------------
    // ----------------监听方法-----------------------
    // ----------------调用方法-----------------------
    return {
      ...toRefs(state),
      ...toRefs(methods)
    }
}

})
</script>

<style lang="stylus" scoped>
.card-tabs-box
  height: 100%
  .component
    height: calc(100% - 40px)
    box-sizing: border-box
    .scrollbar-wrapper
      height 100%
</style>